<template>
  <div class="power-view">
    <main class="screen-bg">
      <!-- 顶部标题 -->
      <div class="header"></div>
      <!-- 左侧模块 -->
      <div class="left-top">
        <pie-charts :echart-datas="chargingPile"></pie-charts>
      </div>
      <div class="left-bottom">
        <line-charts :echart-datas="processMonitoring"></line-charts>
      </div>
      <!-- 右侧模块 -->
      <div class="right-top">
        <right-top-panel :panel-items="chargingTop4" :percentage="percentage"></right-top-panel>
      </div>
      <div class="right-center">
        <bar-charts :echart-datas="chargingStatistics"></bar-charts>
      </div>
      <div class="right-bottom">
        <right-bottom-svg :dots="exceptionMonitoring"></right-bottom-svg>
      </div>
      <!-- 中部模块 -->
      <div class="center">
        <center-svg></center-svg>
      </div>
      <!-- 底部模块 -->
      <div class="bottom">
        <bottom-panel :panel-items="dataAnalysis"></bottom-panel>
      </div>
    </main>
  </div>
</template>

<script setup>
import pieCharts from '@/components/pie-charts.vue';
import lineCharts from '@/components/line-charts.vue';
import barCharts from '@/components/bar-charts.vue';
import rightBottomSvg from '@/components/right-bottom-svg.vue'
import centerSvg from '@/components/center-svg.vue';
import bottomPanel from '@/components/bottom-panel.vue';
import rightTopPanel from '@/components/right-top-panel.vue';
import { ref } from 'vue';
import { getPowerScreenData } from '@/services'
import {
  chargingpileData,
  processMonitoringData,
  chargingStatisticsData,
  exceptionMonitoringData,
  dataAnalysisData,
  chargingTop4Data
} from './config/home-data';

// 充电桩饱和比例
let chargingPile = ref(chargingpileData)
// 充电流程监控
let processMonitoring = ref(processMonitoringData);
// 充电数据分析
let chargingStatistics = ref(chargingStatisticsData);
// 异常监控
let exceptionMonitoring = ref(exceptionMonitoringData);
// 数据分析
let dataAnalysis = ref(dataAnalysisData);
// top4占比
let chargingTop4 = ref(chargingTop4Data)
let percentage = ref(0)

// 发起网络请求
getPowerScreenData().then((res) => {
  chargingPile.value = res.data.chargingPile.data;
  processMonitoring.value = res.data.processMonitoring.data;
  chargingStatistics.value = res.data.chargingStatistics.data;
  exceptionMonitoring.value = res.data.exceptionMonitoring.data;
  dataAnalysis.value = res.data.dataAnalysis.data;
  chargingTop4.value = res.data.chargingTop4.data;
  percentage.value = res.data.chargingTop4.percentage;
})

</script>

<style lang="scss" scoped>
.screen-bg {
  position: absolute;
  width: 100%;
  height: 100%;

  background-color: #070a3c;
  background-image: url(@/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header {
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    height: 56px;
    background-image: url(@/assets/images/bg_header.svg);
    background-repeat: no-repeat;
  }

  .left-top {
    position: absolute;
    top: 116px;
    left: 16px;
    width: 527px;
    height: 443px;
    background-image: url(@/assets/images/bg_left-top.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .left-bottom {
    position: absolute;
    bottom: 49px;
    left: 16px;
    width: 527px;
    height: 435px;
    background-image: url(@/assets/images/bg_left_bottom.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .right-top {
    position: absolute;
    right: 17px;
    top: 96px;
    width: 519px;
    height: 327px;

    background-image: url(../assets/images/bg_right_top.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .right-center {
    position: absolute;
    right: 17px;
    top: 443px;
    width: 519px;
    height: 327px;

    background-image: url(../assets/images/bg_right_center.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .right-bottom {
    position: absolute;
    right: 17px;
    bottom: 49px;
    width: 519px;
    height: 242px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url(../assets/images/bg_right_bottom.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .center {
    position: absolute;
    right: 538px;
    bottom: 272px;
    width: 823px;
    height: 710px;
  }

  .bottom {
    position: absolute;
    right: 540px;
    bottom: 49px;
    width: 823px;
    height: 209px;

    background-image: url(../assets/images/bg_bottom.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>
